<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Events</title>
    <style>
        ul.active {
            background-color: red;
            font-style: italic;
        }
    </style>
</head>
<body>

<ul id="target"
    style="border: 1px solid black; height: 8em;"
    ondragover="handleDragover(event);"
    ondrop="handleDrop(event);"
    ondragenter="handleDragenter(event);"
    ondragleave="handleDragleave(event);"
>

</ul>

<ul>
    <li id="item-1" draggable="true">First item</li>
    <li id="item-2" draggable="true">Second item</li>
    <li id="item-3" draggable="true">Third item</li>
</ul>

<h2>Mouse events:</h2>
<pre id="mouseEventsLog" style="border: 1px solid black; height: 20em; overflow: auto;"></pre>

<h2>Keyboard events:</h2>
<pre id="keyboardEventsLog" style="border: 1px solid black; height: 20em; overflow: auto;"></pre>

<script>
    function logMouseEvent(event) {
        var logElement = document.getElementById('mouseEventsLog');
        logElement.innerHTML += '<strong>' + event.type + '</strong> <span>' + event.target.id +'</span>' + "\n";
        console.log(event);
    }

    function logKeyboardEvent(event) {
        var logElement = document.getElementById('keyboardEventsLog');
        logElement.innerHTML += '<strong>' + event.type + '</strong> <span>&quot;' + event.key +'&quot;</span>' + "\n";
        console.log(event);
    }

    function handleDragenter(e) {
        logMouseEvent(e);
        e.target.classList.add('active');
    }

    function handleDragleave(e) {
        logMouseEvent(e);
        e.target.classList.remove('active');
    }

    function handleDragover(e) {
        e.preventDefault();
    }

    function handleDrop(e) {
        logMouseEvent(e);
        e.preventDefault();

        var data = e.dataTransfer.getData('text');
        e.target.appendChild(document.getElementById(data));
        e.target.classList.remove('active');
    }

    var lis = document.querySelectorAll('ul > li'), el = null;
    for (var i = 0; i < lis.length; i++) {
        el = lis[i];

        el.addEventListener(
            'dragstart',
            function (e) {
                logMouseEvent(e);
                e.dataTransfer.setData('text/plain', e.target.id);
            }
        );

        el.addEventListener('click', logMouseEvent);
        el.addEventListener('contextmenu', logMouseEvent);
        el.addEventListener('dblclick', logMouseEvent);
        el.addEventListener('mouseover', logMouseEvent);
        el.addEventListener('mousedown', logMouseEvent);
        el.addEventListener('mouseup', logMouseEvent);
    }

    document.addEventListener('keydown', logKeyboardEvent);
    document.addEventListener('keyup', logKeyboardEvent);
</script>

</body>
</html>
